{% extends "base.html" %}
{% block content %}
    {% load static %}
    <div class="p-3">
        <div class="container">
            <div class="row mt-3">
                <div class="col-md-6 mx-auto mb-3">
                    <h2>{{ template_data.movie.name }}</h2>
                    <br/>
                    <p><b>Description: </b>{{ template_data.movie.description }}</p></p>
                    <p><b>Price:</b> ${{ template_data.movie.price }}</p>
                    <p class="card-text">
                        <form method="post" action="{% url 'cart.add' id=template_data.movie.id %}">
                            <div class="row">
                                {% csrf_token %}
                                <div class="col-auto">
                                    <div class="input-group col-auto">
                                        <div class="input-group-text">
                                            Quantity:
                                        </div>
                                        <input type="number" min="1" max="10" class="form-control quantity-input" name="quantity" value="1">
                                    </div>
                                </div>
                                <div class="col-auto">
                                    <button class="btn bg-dark text-white" type="submit">Add to cart</button>
                                </div>
                            </div>
                        </form>
                    </p>
                    <h2>Reviews</h2>
                    <hr/>
                    <ul class="list-group">
                        {% for review in template_data.reviews %}
                            <li class="list-group-item pb-3 pt-3">
                                <h5 class="card-title">
                                    Review by {{ review.user.username }}
                                </h5>
                                <h6 class="card-subtitle mb-2 text-muted">
                                    {{ review.date }}
                                </h6>
                                <p class="card-text">{{ review.comment }}</p>
                                {% if user.is_authenticated and user.id == review.user.id %}
                                    <a class="btn btn-primary"
                                       href="{% url 'movies.edit_review' id=template_data.movie.id review_id=review.id %}">Edit</a>
                                    <a class="btn btn-danger delete-review-btn" href="#"
                                       data-url="{% url 'movies.delete_review' id=template_data.movie.id review_id=review.id %}">Delete</a>
                                {% endif %}
                            </li>
                        {% endfor %}
                    </ul>
                    {% if user.is_authenticated %}
                        <div class="container mt-4">
                            <div class="row justify-content-center">
                                <div class="col-12">
                                    <div class="card shadow p-3 mb-4 rounded">
                                        <div class="card-body">
                                            <b class="text-start">Create a review</b> <br/> <br/>
                                            <form method="POST"
                                                  action="{% url 'movies.create_view' id=template_data.movie.id %}">
                                                {% csrf_token %}
                                                <p>
                                                    <label for="comment">Comment:</label>
                                                    <textarea name="comment" required class="form-control"></textarea>
                                                </p>
                                                <div class="text-center">
                                                    <button type="submit" class="btn bg-dark text-white">
                                                        Add Review
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-6 mx-auto mb-3 text-center">
                    <img src="{{ template_data.movie.image.url }}" class="rounded img-card-400">
                </div>
            </div>
        </div>
    </div>
    <!-- 自定义确认对话框 -->
    <div id="confirm-dialog" class="modal" tabindex="-1" role="dialog" style="display: none;">
        <div class="modal-dialog" role="document"
             style="margin: 0; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1050;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">删除提醒</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this review?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirm-delete">Delete</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加遮罩层 -->
    <div id="overlay"
         style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1049; display: none;"></div>

    <!-- 添加JavaScript代码 -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 获取所有删除按钮
            const deleteButtons = document.querySelectorAll('.delete-review-btn');
            const confirmDialog = document.getElementById('confirm-dialog');
            const confirmDelete = document.getElementById('confirm-delete');
            const overlay = document.getElementById('overlay');
            let currentDeleteUrl = '';

            // 为每个删除按钮添加点击事件
            deleteButtons.forEach(button => {
                button.addEventListener('click', function (event) {
                    event.preventDefault(); // 阻止默认行为

                    // 获取删除按钮的URL
                    currentDeleteUrl = this.getAttribute('data-url');

                    // 显示确认对话框和遮罩层
                    confirmDialog.style.display = 'block';
                    overlay.style.display = 'block';
                });
            });

            // 确认删除按钮的点击事件
            confirmDelete.addEventListener('click', function () {
                if (currentDeleteUrl) {
                    window.location.href = currentDeleteUrl;
                }
            });

            // 关闭对话框的事件
            const closeButtons = document.querySelectorAll('[data-bs-dismiss="modal"]');
            closeButtons.forEach(button => {
                button.addEventListener('click', function () {
                    confirmDialog.style.display = 'none';
                    overlay.style.display = 'none';
                });
            });

            // 点击遮罩层关闭对话框
            overlay.addEventListener('click', function () {
                confirmDialog.style.display = 'none';
                overlay.style.display = 'none';
            });
        });
    </script>
{% endblock %}

